{extend name="public/base" /}

{block name="title"}添加站点{/block}

{block name="main"}
    

<form class="layui-form"  style="width: 70%;">
        <table class="layui-table" lay-skin="line" id="e-drag-table" style="margin-top: 20px; width: 500px;">
            <thead>
                <tr>
                    <th style="width: 20px;">ID</th>
                    <th >名称</th>
                    <th >排序</th>
                    <th class="e-drag-lasttd" >操作</th>
                </tr>
            </thead>
            <tbody id="JS_drag_table">                
                <tr  >
                    <td  >
                        <div >0</div>
                    </td>
                    <td >
                        <div ><i class="layui-icon layui-icon-triangle-r"></i>名字0</div>
                    </td>
                    <td >
                        <div></div>
                    </td>
                    <td class="e-drag-lasttd" >
                    操作
                    </td>
                </tr>
                   <tr >
                    <td  >
                        <div >1</div>
                    </td>
                    <td >
                        <div >名字1</div>
                    </td>
                    <td >
                        <div></div>
                    </td>
                    <td class="e-drag-lasttd" >
                    操作
                    </td>
                </tr>
                   <tr >
                    <td  >
                        <div >2</div>
                    </td>
                    <td >
                        <div >名字2</div>
                    </td>
                    <td >
                        <div></div>
                    </td>
                    <td class="e-drag-lasttd" >
                    操作
                    </td>
                </tr>
                  <tr >
                    <td  >
                        <div >3</div>
                    </td>
                    <td >
                        <div >名字3</div>
                    </td>
                    <td >
                        <div></div>
                    </td>
                    <td class="e-drag-lasttd" >
                    操作
                    </td>
                </tr>
                <!--
                <tr class="JSe-drag-preShow" ><td  colspan="9" ><span>ok</span></td></tr>
                -->
                <tr >
                    <td  >
                        <div >4</div>
                    </td>
                    <td >
                        <div >名字4</div>
                    </td>
                    <td >
                        <div></div>
                    </td>
                    <td class="e-drag-lasttd" >
                    操作
                    </td>
                </tr>
                  <tr >
                    <td  >
                        <div >5</div>
                    </td>
                    <td >
                        <div >名字5</div>
                    </td>
                    <td >
                        <div></div>
                    </td>
                    <td  class="e-drag-lasttd" >
                    操作
                    </td>
                </tr>
            </tbody>
        </table>
    </form>

<style>
.layui-table tr{
    transition: all 0s !important; 
    -webkit-transition: all 0s !important;
}

#e-drag-table{
    border-right: none;
}
#e-drag-table .e-drag-lasttd{
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #e6e6e6;
}

/*
.JSe-drag-li{
    height: 40px;
    position: absolute;
    background-color: #FFF;
    -moz-box-shadow:0px 5px 13px #333333; 
    -webkit-box-shadow:0px 5px 13px #333333; 
    box-shadow:0px 5px 13px #333333;
}
/*
.JSe-drag-li td{
    position: relative;
    padding: 9px 15px;
    min-height: 20px;
    line-height: 20px;
    font-size: 14px;
    width: 1%;
}
.JSe-drag-preShow{
    height: 40px;    
}
.JSe-drag-preShow td{
    padding: 0px;
}
.JSe-drag-preShow span{
    margin-left: 4%;
    background: #E6FFFF;
    height: 100%;
    width: 96%;
    display: inline-block;
    border: dashed;
    border-width: 1px;
    border-color: palegreen;
}
*/
</style>
{/block}
{block name="script"}
<script>
layui.use(['dragtree','form'], function(){
    
    // return true;
    layui.dragtree.render({
        dragmain: '#JS_drag_table', // 需要拖动编辑的容器
        dragli  : 'tr', // 具体被拖动的列表
    });
    
});
</script>
{/block}